import Taro from '@tarojs/taro';
import { useState, useEffect } from 'react';
import { View } from '@tarojs/components';
import { AtFab, AtList, AtListItem, AtMessage } from 'taro-ui';
import "taro-ui/dist/style/components/button.scss"; // 按需引入
import "taro-ui/dist/style/components/list.scss";
import "taro-ui/dist/style/components/icon.scss";
import Header from '@/components/header';
import Return from '@/components/Return';
import { getTransferList } from '@/api/application/campustransfer';
import css from './index.module.less';
import "./index.less";

/**
 * 应用/校内转组织
 */
export default function Campustransfer() {
  //用户信息
  const [userInfo, setUserInfo] = useState({});
  //转组织关系列表数据
  const [transferList, setTransferList] = useState([]);
  //审核进度
  const state = ["未通过", "通过", "审批中"];
  //icon图标
  const iconInfo = [
    { size: 25, color: 'rgb(223,38,14)', value: 'close-circle' },
    { size: 25, color: 'rgb(9,187,7)', value: 'check-circle' },
    { size: 25, color: 'rgb(255,116,40)', value: 'bookmark' }
  ];

  useEffect(() => {
    Taro.getStorage({
      key: 'userInfo',
      success: function (info) {
        setUserInfo(info.data);
        if (info.data.isAudited !== 1) {
          Taro.atMessage({
            'message': '您还未进行认证',
            'type': 'error',
          });
        }
        else {
          getTransferList(info.data.studentJobNumber).then(res => {
            setTransferList(res.data);
          });
        }
      }
    });
  }, []);

  const verifyList = () => {
    for (let i = 0; i < transferList.length; i++) {
      if (transferList[i].state === 2) return true;
    }
    return false;
  };

  const viewProgress = (event, id) => {
    const isApplying = verifyList();
    Taro.navigateTo({ url: `progrequery/index?id=${id}&isApplying=${isApplying}` });
  };

  const campusTrans = () => {
    if (verifyList()) {
      Taro.atMessage({
        'message': '当前账号已有申请正在审批中, 请耐心等待审批完成',
        'type': 'warning',
        'duration': 1000
      });
    }
    else {
      Taro.navigateTo({ url: `./newCampTrans/index?userInfo=${JSON.stringify(userInfo)}` });
    }
  };


  return (
    <View className={css.home}>
      <Header message='转组织申请' left='140px' />
      <Return />

      <View className={css.transListCon}>
        <AtMessage />
        {
          userInfo.isAudited !== 1 ? <View className={css.noAudited}><View>您还未进行认证</View></View> :
            <>
              <AtList className={css.list}>
                {
                  transferList.length === 0 ? <></> :
                    transferList.map(item => (
                      <AtListItem
                        key={item.id}
                        arrow='right'
                        title={`${item.originOrganization}->${item.targetOrganization}`}
                        note={item.applicationDate}
                        extraText={state[item.state]}
                        iconInfo={iconInfo[item.state]}
                        onClick={event => viewProgress(event, item.id)}
                      />
                    ))
                }
              </AtList>
              <View className={css.fabButtonBox} >
                <AtFab className={css.fabButton} onClick={campusTrans}>申请转组织</AtFab>
              </View>
            </>
        }
      </View>

    </View>
  );
}